<template>
	<!-- 拼团好货 -->
	<!-- 周一航 2023-4-5 -->
	<view>
		<view class="body">
			<!-- 优惠券 -->
			<view style="width: 100%;background: #fff;height: 31%;">
				<view style="width: 96%;position: absolute;left: 2%;top: 3%; margin-bottom: 30px;height: 80px;">
					<u-swiper :list="slideshowList" height="200px" radius="20px" circular :autoplay="true" keyName="image" @click="skip()"></u-swiper>
				</view>
			</view>
			<view class="">
				<view class="commodity" v-for="(item,index) in commodityList" :key="index" @click="toGoodsView(item)">
					<image :src="'http://101.43.223.224:8765/image/getImageById?id='+ item.imageId.split(',')[0]" style="width: 180rpx;height: 190rpx; border-radius: 100%;margin-top: 4%;"></image>
					<view style="font-weight: bold;margin-top: 4%;font-size: 32rpx;">￥{{item.favorablePrice}}</span></view>
					<view style="color: #666666;margin-top: 4%;font-size: 26rpx;height: 33px;overflow: hidden;">{{item.commodityName}}</view>
				</view>
			</view>
			<view class="bottom_line">
				———————<span style="margin: 0 6%;">我也是有底线的</span>———————
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 拼团好货数据
				commodityList: [],
				// 轮播图集合
				slideshowList: [],
				// 轮播图高度
				height: '',
			}
		},
		onLoad() {
			// 设置变量存放屏幕高度值
			var winHeight = wx.getSystemInfoSync().windowHeight 
			// 获取适应屏幕高度
			this.swiperHeight(winHeight)
			// 查询轮播图
			this.selectSlideshow();
			// 查询拼团好货
			this.selectCommodityNew();
		},
		methods: {
			// 轮播图跳转
			skip(e){
				uni.navigateTo({
					url: this.slideshowList[e].url + this.slideshowList[e].carouselId,
				})
			},
			// 跳转到商品详情页
			toGoodsView(item){
				uni.navigateTo({
					url: '/pages/goods/GoodsView?id=' + item.id,
				})
			},
			// 查询拼团好货
			selectCommodityNew(){
				this.$myRequest({
					url: '/newDaily/selectCommodity'
				}).then(res => {
					if(res.data.code === 200){
						this.commodityList = res.data.data
					}
				})
			},
			// 查询轮播图
			selectSlideshow(){
				this.$myRequest({
					url: '/newDaily/selectSlideShow'
				}).then(res => {
					this.slideshowList = res.data.data
					for (var i = 0; i < this.slideshowList.length; i++) {
						this.slideshowList[i].image = 'http://101.43.223.224:8765/image/getImageById?id=' + this.slideshowList[i].imageId
					}
				})
			},
			// 获取适应屏幕高度
			swiperHeight(winHeight){
				this.height = winHeight / 4  + 'px'
			},
		}
	}
</script>

<style>
page{
	background: #FAF9F7;
}
.body{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.commodity{
	box-sizing: content-box;
	float: left;
	width: 40%;
	height: 350rpx;
	background: #fff;
	border-radius: 6px;
	text-align: center;
	margin: 4% 2% 2% 2%;
	padding: 3%;
	overflow: hidden;
}
.bottom_line{
	width: 96%;
	height: 200rpx;
	line-height: 200rpx;
	text-align: center;
	color: #E4E4E4;
	font-size: 28rpx;
	clear: both;
}
</style>
